<template>
	<view class="order-finish-app">
		<view class="fields">
			<view class="field">
				<view class="title">评分：</view>
				<view class="value" style="margin-top:20upx;">
					<uni-rate max="5" :value="item.score" @change="onRateChange"></uni-rate>
				</view>
			</view>
			<view class="field">
				<view class="title">内容：</view>
				<view class="value" style="margin-top:10upx;">
					<textarea placeholder="请填写内容" v-model="item.content" class="input textarea" />
				</view>
			</view>
			<view class="field photo-field">
				<view class="photo-list">
					<view class="photo-item" v-for="(photoItem,key) in item.imageIds" :key="key">
						<view class="photo-item-img" style="width:150upx;height:150upx;border:1px solid #eee;">
							<image :src="photoItem" mode="aspectFit" style="width:150upx;height:150upx;"  />
						</view>
						<view class="danger-btn" @click="delItem(index, photoItem)">删除</view>
					</view>
				</view>
				<view class="add-photo-action" @click="addPhotoItem">
					<image class="img" src="/static/upload.png" style="width:150upx;height:150upx;" />
				</view>
				<view class="tip">最多上传3张图片</view>
			</view>
		</view>
		<view class="actions">
			<view class="btn btn-submit" @click="submit">提交</view>
		</view>
	</view>
</template>

<script>
	import util from '@/libs/util.js'
	import uniRate from '@/components/uni-rate/uni-rate.vue'
  import globalConfig from '@/config'
  const baseHttp = globalConfig.API_HOST
	export default {
		data() {
			return {
        baseHttp: baseHttp,
				loading: false,
				item:this.getInitItem()
			};
		},
		onLoad(params) {	
			this.item.orderNO = params.orderNO
		},
		onShow() {

		},
		components: {
			uniRate
		},
		methods: {
			...util,
			getInitItem() {
				return {
					orderNO: '',
					score: 5,
					evaluateComment: '好评',
					imageIds: []
				};
			},
			delItem(index,photoItem) {
				uni.showModal({
				    title: '提示',
				    content: '确定删除',
				    success:  (res) => {
				        if (res.confirm) {
							this.item.imageIds.splice(index,1)
				        } else if (res.cancel) {
				            //console.log('用户点击取消');
				        }
				    }
				});
			},
			addPhotoItem() {
				// const baseHttp = globalConfig.API_HOST
				if (this.item.imageIds && this.item.imageIds.length>=3) {
					this.$Message.error('最多上传3张图片')
				} else {
					uni.chooseImage({
						count: 3,
						sizeType: ['compressed'],
					    success: (chooseImageRes) => {
					        const tempFilePaths = chooseImageRes.tempFilePaths;
							let token = util.isUserLogin()
							for(let tempFileKey in tempFilePaths) {
								uni.uploadFile({
									url: baseHttp + '/image/add', //仅为示例，非真实的接口地址
									filePath: tempFilePaths[tempFileKey],
									//header:{token: token},
									name: 'file',
									formData: {},
									success: (uploadFileRes) => {
										let response = JSON.parse(uploadFileRes.data);
										if (response.ret == 1) {
											this.item.imageIds.push(response.data)
										} else {
											this.$Message.error(response.msg)
										}
									},
									fail: (err) => {
										console.log(err)
									}
								});
							}
					    }
					});
				}
			},
			onRateChange(obj) {
				this.item.score = obj.value
			},
			submit() {
				let params = this.toNormalArr(this.item);
				params.imageIds = params.imageIds.join(',');
				this.$api.post('/orderComment/add',
					params
				).then((response) => {
					if (response.ret === 1) {
						this.$Message.success('评论成功')
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1500);
					} else {
						this.$Message.error(response.msg)
					}
				})
			},
			goPage(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss">
	.order-finish-app{
		font-size:32upx;
		.photo-list{
			display: flex;
			.photo-item{
				margin-right: 20upx;
			}
		}
		.fields{
			
			.photo-field{
				display: flex;
				flex-direction: column;
				.add-photo-action{
					width:100%;
					margin-top:10upx;
					.img{
						width: 200upx;
						height:200upx;
					}
				}
			}
						
			.field{
				border:1upx solid #eee;
				padding:20upx;
				margin:20upx;
				display: flex;

				.title{
					width:100upx;
				}
				.value{
					flex:1;
					margin-left:20upx;
					/*margin-top:20upx;*/
					.input{
						width:100%;
					}
					.textarea{
						height:100upx;
					}
				}
				
			}
		}
		
		.actions{
			display: flex;
			justify-content: center;
			margin-top:30upx;
			.btn-submit{
				background-color: red;
				color:white;
				padding:20upx 30upx;
				width:600upx;
			}
		}
	}
</style>
